<template>
	<view>
		<view class="item" v-if="item.todayRecord">
			<view class="item-list"> 姓名：<text>{{item.sname}} </text><br>班级：<text>{{item.sclass}}</text></view>
			<view class="item-list2">学号：<text>{{item.sid}}</text><br>座号：<text>{{item.seatId}}</text></view>
			<view class="item-list3">
				<view class="leave">请假中</view>
			</view>

		</view>
		<view class="item" v-else>
			<view class="item-list"> 姓名：<text>{{item.sname}} </text><br>班级：<text>{{item.sclass}}</text></view>
			<view class="item-list2">学号：<text>{{item.sid}}</text><br>座号：<text>{{item.seatId}}</text></view>
			<view class="item-list3" v-if="item.todayStatus">
				<br><button class="noleave" @click="check()"
					style="width: 100%;font-size: 25rpx;background-color: #25b3ff;color: white;">考勤</button>
			</view>
			<view class="item-list3" v-else>
				<br><button class="noleave" @click="check()"
				style="width: 100%;font-size: 20rpx;background-color: #25b3ff;color: white;">已考勤</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "itemList4",
		props: {
			item: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {

			};
		},
		onLoad() {
			this.getData()

		},
		methods: {
			getData() {

			},
			async check() {
					console.log("this.item.bid=>",this.item.bid)
					console.log("this.item.todayStatus=>",this.item.todayStatus)
					if(this.item.todayStatus){
					this.item.todayStatus =! this.item.todayStatus
						console.log("this.item.todayStatus1=>",this.item.todayStatus)
						const res = await this.$myRequest({
							url: "/addOrDeleteAbsence",
							data: {
								"bId": this.item.bid,
								"todayStatus": this.item.todayStatus
							},
							method: "POST"
						}).then(res => {
							console.log("ccres=>", res)
						})
					}
					else{
						this.item.todayStatus =! this.item.todayStatus
						console.log("this.item.todayStatus2=>",this.item.todayStatus)
						const res = await this.$myRequest({
						url: "/addOrDeleteAbsence",
							data: {
								"bId": this.item.bid,
								"todayStatus": this.item.todayStatus
							},
							method: "POST"
						}).then(res => {
							console.log("ccres=>", res)
						})
									
					}
			
				
				console.log("this.item.todayStatus=>", this.item.todayStatus)
			}
		}
	}
</script>

<style lang="scss">
	.item {
		flex: 3;
		height: 150rpx;
		margin: 13rpx;
		border-radius: 20rpx;
		// display: flex;
		background-color: #ffffff;
		border: #c1c1c1 solid 3rpx;
		font-size: 31rpx;

		text {
			color: #009dff;
		}

		&-list {
			color: #797774;
			float: left;
			line-height: 70rpx;
			padding: 0 10rpx;
			justify-content: center;
			width: 34%;
		}

		&-list2 {
			color: #797774;
			float: left;
			line-height: 70rpx;
			padding: 0 0rpx;
			justify-content: center;
			width: 44%;
		}

		&-list3 {
			color: #797774;
			float: left;
			margin-left: 17rpx;
			line-height: 70rpx;
			padding: 10 0rpx;
			height: 20%;
			width: 16%;

			.noleave {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 99%;
				height: 65rpx;
				font-size: 26rpx;
				border-radius: 15rpx;
				background-color: unset;
				border: #00a6ff solid 2rpx;
				color: #00a6ff;

			}

			.noleave:hover {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 99%;
				height: 65rpx;
				font-size: 26rpx;
				border-radius: 15rpx;
				background-color: #25b3ff;
				color: #FFFFFF;
			}

			.leave {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 55rpx;
				font-size: 14rpx;
				border-top-right-radius: 15rpx;
				border-bottom-left-radius: 15rpx;
				background-color: #f0f0f0;
				color: #676767;
			}
		}
	}
</style>
